<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery-1.7.1.js"></script>
    <title>加班工时管理系统</title>
    <link rel="stylesheet" href="../css/06TJBB.css">
</head>

<body>
<div class="body">
    <div class="top">
        <div class="nav-top">
            <div id="menu_left">
                <img src="../image/02main.jpg" />
            </div>
            <div class="title">
                <img class="img1" src="../image/daohangtiao1.jpg" />
                <div class="tab">
                    <table>
                        <tr>
                            <td><a href="/employee/02main" style="margin-left:6px; color:#cfdef7; font-family:黑体; font-size:12px;z-index:100;position:relative;">我的中心</a></td>
                        </tr>
                    </table>
                </div>
                <img class="img2" src="../image/daohangtiao1.jpg" />
                <div class="tab">
                    <table>
                        <tr>
                            <td><a href="/team/04dengji" style="margin-left:80px; color:#cfdef7; font-family:黑体; font-size:12px;z-index:100;position:relative;">在线登记</a></td>
                            <td><a href="/team/04dengji" style="color:#cfdef7; font-family:黑体;z-index:100;position:relative;">×</a></td>
                        </tr>
                    </table>
                </div>
                <img class="img3" src="../image/daohangtiao1.jpg" />
                <div class="tab">
                    <table>
                        <tr>
                            <td><a href="/whour/showWhour" style="margin-left:165px; color:#cfdef7; font-family:黑体; font-size:12px;z-index:100;position:relative;">工时查询</a></td>
                            <td><a href="/whour/showWhour" style="color:#cfdef7; font-family:黑体;z-index:100;position:relative;">×</a></td>
                        </tr>
                    </table>
                </div>
                <img class="img4" src="../image/daohangtiao2.jpg" />
                <div class="tab">
                    <table>
                        <tr>
                            <td><a href="/whour/06whour" style="margin-left:250px; color:#006ce0; font-family:黑体; font-size:12px;"><b>统计报表</b></a></td>
                            <td><a href="/whour/06whour" style="color:#a1a4a6; font-family:黑体;"><b>×</b></a></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="menu_rigth">
                <p class="p2" style="color: white; margin-top:-68px;">欢迎您，</p><p class="p1">${sessionScope.employee.name}</p>
                <ul>
                    <li class="li1"><a href="#"><img src="../image/daohangtiao_suo.jpg" style="margin-left:110px; width:18px; height:20px;"/></a></li>
                    <li class="li2"><a href="/index/signout"><img src="../image/daohangtiao_out.jpg" style="margin-left:140px; width:18px; height:18px;" /></a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="content">
        <div class="content1">
            <div class="content2">
                <div class="div1">
                    <div class="div1">
                        <span>查询时间</span>
                        <input type="date" value="2016-03-01" class="input2"/> - <input type="date" value="2016-03-01" class="input2"/>
                        <button class="button3">查询</button>
                    </div>

                    <div class="div2">
                        <h4>&nbsp;团队工时统计</h4>
                        <div id="container1"></div>
                        <script type="text/javascript">
                            var dom = document.getElementById("container1");
                            var myChart = echarts.init(dom);
                            option = null;
                            option = {
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b}: {c}h ({d}%)'
                                },
                                series: [
                                    {
                                        name: '团队：CRM应用团队',
                                        type: 'pie',
                                        radius: ['25%', '50%'],
                                        startAngle:180,
                                        labelLine: {
                                            normal: {
                                                length: 15,
                                                length2: 70
                                            }
                                        },
                                        label: {
                                            formatter: '{b|{a}}\n {b|{b}：}{b|{c}h}  {per|{d}%} ',
                                            borderWidth: 20,
                                            borderRadius: 4,
                                            padding: [20, -30],
                                            rich: {
                                                a: {
                                                    float:'left',
                                                    color: '#999',
                                                    lineHeight: 20,
                                                    align: 'center',
                                                },
                                                b: {
                                                    fontSize: 14,
                                                    lineHeight: 33
                                                },
                                                per: {
                                                    color: '#eee',
                                                    backgroundColor: '#5a7087',
                                                    padding: [2, 3],
                                                    borderRadius: 2,
                                                }
                                            }
                                        },
                                        data: [
                                            {value: 400, name: '工时',itemStyle:{color: '#ff9b77'}},
                                            {value: 258, name: '工时',itemStyle:{color: '#ffe171'}},
                                            {value: 142, name: '工时',itemStyle:{color: '#bddc7f'}}
                                        ]
                                    }
                                ]
                            };;
                            if (option && typeof option === "object") {
                                myChart.setOption(option, true);
                            }
                        </script>

                        <p class="p5">总工时数</p >
                        <p class="p6">800<span class="span1">h</span></p >
                    </div>


                    <div class="div3">
                        <h4>&nbsp;<a href="/whour/07whour" style="color: black">员工工时统计</a></h4>
                        <div>
                            <p class="p2">加班时长[h]</p>
                            <p class="p3">加班次数[次]</p>
                        </div>
                        <div id="container2"></div>
                        <div id="container"></div>
                        <script type="text/javascript">
                            var dom = document.getElementById("container");
                            var myChart = echarts.init(dom);
                            option = null;
                            option = {
                                title: {
                                    text: ''
                                },
                                grid: {
                                    left: '3%',
                                    right: '30%',
                                    bottom: '13%',
                                    top:'10%',
                                    containLabel: true
                                },
                                tooltip: {
                                    // trigger: 'axis',
                                    showDelay: 0,
                                    formatter: function (params) {
                                        if (params.value.length > 1) {
                                            return params.seriesName + ' :<br/>'
                                                + params.value[0] + '次 '
                                                + params.value[1] + 'h ';
                                        }else {
                                            return params.seriesName + ' :<br/>'
                                                + params.name + ' : '
                                                + params.value + 'h ';
                                        }
                                    },
                                    axisPointer: {
                                        show: true,
                                        type: 'cross',
                                        lineStyle: {
                                            type: 'dashed',
                                            width: 1
                                        }
                                    }
                                },
                                legend: {
                                    data: ['黄盼盼','何亚丽','陆巧敏','郑思木','宝清','郭伊纳','李婷婷','黄辉祥','蒋伶俐','沈夏琳','何玉卓', '马琳','含韵','马卓宇','晓谕轩','范不贤','张靓颖', '文晓','宇豪','天明','叶铭瑄','肖亮','佑大同','邱敏','韩旭','明小米','周广科','琳琳'],
                                    right: 'left',
                                    orient: 'vertical',
                                    padding:(10,10),
                                    margin:(10,10)
                                },
                                xAxis: [
                                    {
                                        data:['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'],
                                        type: 'category',
                                        scale: true,
                                        splitLine: {
                                            show: false
                                        }
                                    }],
                                yAxis: [
                                    {
                                        type: 'value',
                                        scale: true,
                                        axisLabel: {
                                            formatter: '{value} '
                                        },
                                        splitLine: {
                                            show: true
                                        }
                                    }],
                                series: [
                                    {

                                        name: '黄盼盼',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#8ca028"}},
                                        label: {
                                            position: 'inner'
                                        },
                                        data: [
                                            [12, 191,'黄盼盼']
                                        ],
                                        markLine: {
                                            lineStyle: {
                                                type: 'dasked',
                                                color:'#ff6500',
                                                borderWidth:3
                                            },
                                            data: [
                                                { xAxis: 10 },
                                                { yAxis: 20 }
                                            ]
                                        }
                                    },
                                    {
                                        name: '何亚丽',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#5a2db5"}},
                                        data: [
                                            [10, 184,'何亚丽']
                                        ],
                                    },
                                    {
                                        name: '陆巧敏',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#a756f9"}},
                                        data: [
                                            [23, 178,'陆巧敏']
                                        ],
                                    },
                                    {
                                        name: '郑思木',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#0066cc"}},
                                        data: [
                                            [17, 158,'郑思木']
                                        ],
                                    },
                                    {
                                        name: '宝清',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#99cc33"}},
                                        data: [
                                            [20, 150,'宝清']
                                        ],
                                    },
                                    {
                                        name: '郭伊纳',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#9d0c6d"}},
                                        data: [
                                            [6, 137,'郭伊纳']
                                        ],
                                    },
                                    {
                                        name: '李婷婷',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#33cc99"}},
                                        data: [
                                            [12, 119,'李婷婷']
                                        ],
                                    },
                                    {
                                        name: '黄辉祥',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#8ca0b4"}},
                                        data: [
                                            [26, 113,'黄辉祥']
                                        ],
                                    },
                                    {
                                        name: '蒋伶俐',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#99cc00"}},
                                        data: [
                                            [22, 83,'蒋伶俐']
                                        ],
                                    },
                                    {
                                        name: '沈夏琳',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#b48cc8"}},
                                        data: [
                                            [13, 82,'沈夏琳']
                                        ],
                                    },
                                    {
                                        name: '何玉卓',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#01060c"}},
                                        data: [
                                            [10, 80,'何玉卓']
                                        ],
                                    },
                                    {
                                        name: '马琳',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#4c545d"}},
                                        data: [
                                            [12, 79,'马琳']
                                        ],
                                    },
                                    {
                                        name: '含韵',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#006ce0"}},
                                        data: [
                                            [24, 78,'含韵']
                                        ],
                                    },
                                    {
                                        name: '马卓宇',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#ff9966"}},
                                        data: [
                                            [6, 77,'马卓宇']
                                        ],
                                    },
                                    {
                                        name: '晓谕轩',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#0066cc"}},
                                        data: [
                                            [8, 77,'晓谕轩']
                                        ],
                                    },
                                    {
                                        name: '范不贤',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#ce0c3c"}},
                                        data: [
                                            [15, 76,'范不贤']
                                        ],
                                        markArea: {
                                            silent: true,
                                            itemStyle: {
                                                color: '#e1e1ff',
                                                opacity: 0.7
                                            },
                                            data: [
                                                [{
                                                    name: '劳苦区',
                                                    label:{
                                                        show: true,
                                                        position: "inside", // markArea中文字（name）位置
                                                        offset: [0, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
                                                        color: "#ff86ff" // markArea中文字（name）颜色
                                                    },
                                                    xAxis: 10,
                                                    yAxis:20
                                                },
                                                    {
                                                        yAxis:200
                                                    }]
                                            ]
                                        },
                                    },
                                    {
                                        name: '张靓颖',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#7caee1"}},
                                        data: [
                                            [14, 75,'张靓颖']
                                        ],
                                    },
                                    {
                                        name: '文晓',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#0b0b0a"}},
                                        data: [
                                            [9, 72,'文晓']
                                        ],
                                    },
                                    {
                                        name: '宇豪',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#cc0033"}},
                                        data: [
                                            [8, 70,'宇豪']
                                        ],
                                        markArea: {
                                            silent: true,
                                            itemStyle: {
                                                color: '#d5f4ff',
                                                opacity: 0.7
                                            },
                                            data: [
                                                [{
                                                    name: '清闲区',
                                                    label:{
                                                        show: true,
                                                        position: "inside", // markArea中文字（name）位置
                                                        offset: [0, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
                                                        color: "#87dcff" // markArea中文字（name）颜色
                                                    },
                                                },
                                                    {
                                                        xAxis:10,
                                                        yAxis:20
                                                    }]
                                            ]
                                        },
                                    },
                                    {
                                        name: '天明',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#274103"}},
                                        data: [
                                            [9, 68,'天明']
                                        ],
                                    },
                                    {
                                        name: '叶铭瑄',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#d6f9a5"}},
                                        data: [
                                            [21, 65,'叶铭瑄']
                                        ],
                                    },
                                    {
                                        name: '肖亮',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#88bfea"}},
                                        data: [
                                            [13, 64,'肖亮']
                                        ],
                                    },
                                    {
                                        name: '佑大同',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#106e9f"}},
                                        data: [
                                            [10, 64,'佑大同']
                                        ],
                                    },
                                    {
                                        name: '邱敏',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#eb6692"}},
                                        data: [
                                            [9, 60,'邱敏']
                                        ],
                                    },
                                    {
                                        name: '韩旭',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#633d2f"}},
                                        data: [
                                            [7, 55,'韩旭']
                                        ],
                                    },
                                    {
                                        name: '明小米',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#cc1c67"}},
                                        data: [
                                            [9, 54,'明小米']
                                        ],
                                    },
                                    {
                                        name: '周广科',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#ede2be"}},
                                        data: [
                                            [7, 52,'周广科']
                                        ],
                                        markArea: {
                                            silent: true,
                                            itemStyle: {
                                                color: '#ffe6f8',
                                                opacity: 0.7
                                            },
                                            data: [
                                                [{
                                                    name: '精英区',
                                                    label:{
                                                        show: true,
                                                        position: "inside", // markArea中文字（name）位置
                                                        offset: [0, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
                                                        color: "#b7b0fa" // markArea中文字（name）颜色
                                                    },
                                                    xAxis:10,
                                                    yAxis:0
                                                },
                                                    {
                                                        yAxis:20
                                                    }]
                                            ]
                                        },
                                    },
                                    {
                                        name: '琳琳',
                                        type: 'scatter',
                                        itemStyle:{ normal: {color: "#ff6666"}},
                                        data: [
                                            [2, 10,'琳琳']
                                        ],
                                        markArea: {
                                            silent: true,
                                            itemStyle: {
                                                color: '#ffe6f8',
                                                opacity: 0.7
                                            },
                                            data: [
                                                [{
                                                    name: '精英区',
                                                    label:{
                                                        show: true,
                                                        position: "inside", // markArea中文字（name）位置
                                                        offset: [0, 0], // markArea中文字（name）显示在位置基础上x、y轴偏移
                                                        color: "#b7b0fa" // markArea中文字（name）颜色
                                                    },
                                                    yAxis:20
                                                },
                                                    {

                                                        xAxis: 10,
                                                        yAxis:200
                                                    }]
                                            ]
                                        },
                                    }
                                ]
                            };;
                            if (option && typeof option === "object") {
                                myChart.setOption(option, true);
                            }
                        </script>
                        <div class="content4">
                            <a href="#"><img src="../image/dian.jpg" /></a>
                            <a href="#"><img src="../image/list.jpg" /></a>
                        </div>
                        <div class="content3">
                            <p class="p4">员工姓名</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="bottom">
            Copyright © 2015 中国电信股份有限公司福建分公司. All Rights Reserved
        </div>
    </div>
</body>
</html>
